<!--
 * @Author: caozaihui 15908754730@163.com
 * @Date: 2024-06-14 00:47:40
 * @LastEditors: czh 2119294696@qq.com
 * @LastEditTime: 2024-06-27 16:45:16
 * @FilePath: \YMU_forum_vue\src\views\Home\components\main\HomeMain.vue
 * @Description: 最新文章和关注文章
-->
<script setup>
import ArticleCardFull from '@/components/article/ArticleCardFull.vue';
import InfiniteArticle from './InfiniteArticle.vue';
</script>

<template>
  <div style="display: flex;">
    <p>你好民大</p>
    <p class="radial">Hello YMU</p>
  </div>
  <!-- <el-tabs type="border-card">
    <el-tab-pane label="最新文章">

    </el-tab-pane>
    <el-tab-pane label="你的关注">
      <ArticleCardFull/>
    </el-tab-pane>
  </el-tabs> -->
  <div style="height: 20px;"></div>
  <!-- 文章 -->
  <InfiniteArticle />
  <div style="height: 15px;"></div>
</template>
<style scoped>
p {
  margin: auto;
  font-family: "Reggae One", cursive;
  font-size: 48px;
  color: #ffffff;
  -webkit-mask: radial-gradient(circle at 0 50%, #000, transparent 10%, transparent 0);
  mask: radial-gradient(circle at 0 50%, #000, transparent 10%, transparent 0);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-animation: scale 5s infinite;
  animation: scale 5s infinite;
}

.radial {
  -webkit-mask: radial-gradient(circle at 50% 0, #000, transparent 20%, transparent 0);
  mask: radial-gradient(circle at 50% 0, #000, transparent 20%, transparent 0);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-animation: scale2 5s infinite;
  animation: scale2 5s infinite;
}

@-webkit-keyframes scale {
  0% {
    -webkit-mask-size: 100%;
    mask-size: 100%;
  }

  50%,
  100% {
    -webkit-mask-size: 2000%;
    mask-size: 2000%;
  }
}

@keyframes scale {
  0% {
    -webkit-mask-size: 100%;
    mask-size: 100%;
  }

  50%,
  100% {
    -webkit-mask-size: 2000%;
    mask-size: 2000%;
  }
}

@-webkit-keyframes scale2 {
  0% {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  50%,
  100% {
    -webkit-mask-size: 100% 2000%;
    mask-size: 100% 2000%;
  }
}

@keyframes scale2 {
  0% {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  50%,
  100% {
    -webkit-mask-size: 100% 2000%;
    mask-size: 100% 2000%;
  }
}
</style>
